<template>
  <div class="component">
    <template v-if="Array.isArray(content)">
      <!-- content 是数组的处理 -->
      <div v-if="content[0]?.name" class="video_container">
        <img :src="imageSrc" />{{ content[0]?.name }}
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, watch, ref } from "vue";
import calendarIcon from "@/assets/svg/calendar.svg?component";
export default defineComponent({
  name: "Audio",
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {}
    }
  },
  setup(props) {
    const content = ref(props.valueFromParent?.moduleValue?.value);
    const imageSrc = ref("/assets/Audio.svg/");
    watch(
      () => props.valueFromParent,
      newVal => {
        content.value = newVal.moduleValue?.value;
      },
      { deep: true }
    );
    return {
      content,
      calendarIcon,
      imageSrc
    };
  }
});
</script>

<style scoped>
.component {
  /* 样式 */
  color: white;
  border: 1px solid #ff8d1a;
  width: 345px;
  min-height: 65px;
  margin-top: 20px;
  background-color: #232323;
  border-radius: 10px;
  overflow: hidden;
  .video_container {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 108px;
    img {
      border-radius: 10px;
      width: 7.99px;
      height: 9.08px;
    }
  }
}
</style>
